<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        #imglist{
            width: 95%;
            margin: 0 auto;
        }

        #imglist img{
            width: 600px;
            height: 350px;
            background: url('./imgs/loading.gif') no-repeat center center;
        }

    </style>
</head>
<body>
    <h1>下滑加载图片</h1>
    <hr>

    <!-- 1.提高用户的体验 -->
    <!-- 2.给服务器的QQ留有更多的响应时间 -->

        <div id="imglist">
        <img data-src="./imgs/Meinv001.jpg">
        <img data-src="./imgs/Meinv002.jpg">
        <img data-src="./imgs/Meinv003.jpg">
        <img data-src="./imgs/Meinv004.jpg">
        <img data-src="./imgs/Meinv005.jpg">
        <img data-src="./imgs/Meinv006.jpg">
        <img data-src="./imgs/Meinv007.jpg">
        <img data-src="./imgs/Meinv008.jpg">
        <img data-src="./imgs/Meinv009.jpg">
        <img data-src="./imgs/Meinv010.jpg">
        <img data-src="./imgs/Meinv011.jpg">
        <img data-src="./imgs/Meinv012.jpg">
        <img data-src="./imgs/Meinv013.jpg">
        <img data-src="./imgs/Meinv014.jpg">
        <img data-src="./imgs/Meinv015.jpg">
        <img data-src="./imgs/Meinv016.jpg">
        <img data-src="./imgs/Meinv017.jpg">
        <img data-src="./imgs/Meinv018.jpg">
        <img data-src="./imgs/Meinv001.jpg">
    </div>


    <script>
        // 获取 img 集合
        var imglist = document.getElementById('imglist');
        var imgs = imglist.getElementsByTagName('img');
        // console.log(imgs);
        
        // 获取 imglist 的宽度
        var box_width = imglist.offsetWidth;
        // console.log(box_width);
        
        // 获取 视口高度
        var view_height = document.documentElement.clientHeight;
        // console.log(view_height);

        // 计算横着 能加载几张图片   列数
        var x_number = Math.floor(box_width / imgs[0].offsetWidth);
        // console.log(x_number);
        
        // 首屏图片数量
        // Math.ceil((视口高度 - 首图到顶部的偏移量) / 首图的高度) * 横向图片数量
        var first_number = Math.ceil((view_height - imgs[0].offsetTop) / imgs[0].offsetHeight) * x_number;
        // console.log(first_number);
        
        // 加载首屏图片
        var m = 0; // 记录目前加载到第几张
        // 加载
        loadImage(m, first_number);
        // 更新m值
        m += first_number;


        // 绑定滚动事件
        window.onscroll = function () {
            if (m >= imgs.length) return;
            // 获取 滚动条 滚过的距离
            var top = document.body.scrollTop || document.documentElement.scrollTop;
            // 获取 还未加载的 第一张图片 到顶部的偏移量
            var img_top = imgs[m].offsetTop;

            // console.log(top, img_top); // 滚动条滚过的距离 : 未加载图片到顶部距离
            // 计算加载临界点
            if ((view_height + top) >= img_top) {
                // 加载新图
                loadImage(m, x_number);
                // 更新m值
                m += x_number;
            }
        }


        /**
         * 加载图片的函数
         * @param  number start 从第几张开始加载
         * @param  str nums  加载几张图片
         * @return undefined
         */
        function loadImage(start, nums) {
            for (var i = start; i < (start + nums); i++) {
                if (i >= imgs.length) return;
                // 延迟加载 闭包
                (function(i){
                    setTimeout(function(){
                        imgs[i].src = imgs[i].getAttribute('data-src');
                    }, 500);
                })(i);
            }
        }

        
    </script>



</body>
</html>



